<template>
  <div class="main">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="淘宝/天猫热门店铺" name="1">
        <div class="data">
          <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
            <el-radio-button label="1">1日榜</el-radio-button>
            <el-radio-button label="2">3日榜</el-radio-button>
            <el-radio-button label="3">7日榜</el-radio-button>
          </el-radio-group>
          <div class="block">
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
          <el-popover
            placement="right-end"
            title="淘宝/天猫热门店铺榜介绍:"
            width="400"
            trigger="hover"
          >
            <p>
              淘宝/天猫热门店铺榜是将淘宝/天猫各店铺中参与了抖音推广的所有商品在抖音的热度进行排序后的榜单，默认按抖音访客量排序
            </p>
            <p>淘宝/天猫热门店铺榜数据说明:</p>
            <p>抖音访客量: 该店铺抖音推广商品的抖音访客量之和</p>
            <p>近30天销量: 该店铺抖音推广商品近30天的销量之和</p>
            <p>推广商品: 该店铺参与了抖音推广的商品总数</p>
            <p>在售播主: 正在销售该店铺推广商品的抖音播主数</p>
            <p>播主粉丝: 在售播主的粉丝数之和</p>
            <p>推广视频: 在售播主发布的关联推广商品的视频数</p>
            <p>视频点赞: 推广视频的点赞数之和</p>
            <p>视频评论: 推广视频的评论数之和</p>
            <p>视频分享: 推广视频的分享数之和</p>
            <p>
              数据下方红字:
              1日榜（今日较昨日新增或减少了多少），3日榜（今日较前3天新增或减少了多少），7日榜（今日较前7天新增或减少了多少）
            </p>
            <p slot="reference">
              淘宝/天猫 - 热门店铺榜【 统计时间: 9月29日】<i
                class="el-icon-question"
              ></i>
            </p>
          </el-popover>
        </div>
        <div class="search">
          <span>店铺搜索</span>
          <el-input
            placeholder="请输入淘宝/天猫的店铺名或关键词"
            v-model="input3"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <hr style="height: 1px; border: none; border-top: 1px dashed #ececec" />
        <div class="cate">
          <span>店铺类型</span>
          <el-radio-group v-model="radio2" size="small">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="女装"></el-radio-button>
            <el-radio-button label="男装"></el-radio-button>
            <el-radio-button label="鞋子"></el-radio-button>
            <el-radio-button label="箱包"></el-radio-button>
            <el-radio-button label="美妆"></el-radio-button>
            <el-radio-button label="护肤"></el-radio-button>
            <el-radio-button label="生活"></el-radio-button>
            <el-radio-button label="居家"></el-radio-button>
            <el-radio-button label="美食"></el-radio-button>
            <el-radio-button label="运动"></el-radio-button>
            <el-radio-button label="数码"></el-radio-button>
            <el-radio-button label="母婴"></el-radio-button>
            <el-radio-button label="配饰"></el-radio-button>
            <el-radio-button label="其他"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="sel">
          <el-select v-model="value" clearable placeholder="请输入店铺类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <hr style="height: 1px; border: none; border-top: 1px dashed #ececec" />
        <div class="table">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="排名" width="100">
            </el-table-column>
            <el-table-column prop="name" label="店铺" width="420">
            </el-table-column>
            <el-table-column prop="province" label="抖音访客量" width="170">
            </el-table-column>
            <el-table-column
              prop="city"
              label="近30天销量"
              width="150"
              style="color: red"
            >
            </el-table-column>
            <el-table-column prop="address" label="推广商品" width="150">
            </el-table-column>
            <el-table-column prop="address1" label="在售博主" width="120">
            </el-table-column>
            <el-table-column prop="address" label="博主粉丝" width="120">
            </el-table-column>
            <el-table-column prop="address" label="视频点赞" width="120">
            </el-table-column>
            <el-table-column prop="address" label="视频评论" width="120">
            </el-table-column>
            <el-table-column prop="address" label="视频分享" width="150">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="抖音小店热门店铺" name="2">
        <div class="data">
          <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
            <el-radio-button label="1">1日榜</el-radio-button>
            <el-radio-button label="2">3日榜</el-radio-button>
            <el-radio-button label="3">7日榜</el-radio-button>
          </el-radio-group>
          <div class="block">
            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
          <el-popover
            placement="right-end"
            title="抖音小店热门店铺榜介绍:"
            width="400"
            trigger="hover"
          >
            <p>
              抖音小店热门店铺榜是将抖音小店各店铺中参与了抖音推广的所有商品在抖音的热度进行排序后的榜单，默认按抖音访客量排序
            </p>
            <p>抖音小店热门店铺榜数据说明:</p>
            <p>抖音访客量: 该店铺抖音推广商品的抖音访客量之和</p>
            <p>近30天销量: 该店铺抖音推广商品近30天的销量之和</p>
            <p>推广商品: 该店铺参与了抖音推广的商品总数</p>
            <p>在售播主: 正在销售该店铺推广商品的抖音播主数</p>
            <p>播主粉丝: 在售播主的粉丝数之和</p>
            <p>推广视频: 在售播主发布的关联推广商品的视频数</p>
            <p>视频点赞: 推广视频的点赞数之和</p>
            <p>视频评论: 推广视频的评论数之和</p>
            <p>视频分享: 推广视频的分享数之和</p>
            <p>
              数据下方红字:
              1日榜（今日较昨日新增或减少了多少），3日榜（今日较前3天新增或减少了多少），7日榜（今日较前7天新增或减少了多少）
            </p>
            <p slot="reference">
              抖音小店 - 热门店铺榜【 统计时间: 9月29日】<i
                class="el-icon-question"
              ></i>
            </p>
          </el-popover>
        </div>
        <div class="search">
          <span>店铺搜索</span>
          <el-input
            placeholder="请输入抖音小店的店铺名或关键词"
            v-model="input3"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <hr style="height: 1px; border: none; border-top: 1px dashed #ececec" />
        <div class="cate1">
          <span>店铺类型</span>
          <el-radio-group v-model="radio2" size="small">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="家居建材"></el-radio-button>
            <el-radio-button label="家用家电"></el-radio-button>
            <el-radio-button label="美妆个护"></el-radio-button>
            <el-radio-button label="时尚配饰"></el-radio-button>
            <el-radio-button label="潮流男鞋"></el-radio-button>
            <el-radio-button label="精品女装"></el-radio-button>
            <el-radio-button label="居家内衣"></el-radio-button>
            <el-radio-button label="图书教育"></el-radio-button>
            <el-radio-button label="宠物用品"></el-radio-button>
            <el-radio-button label="食品酒饮"></el-radio-button>
            <el-radio-button label="母婴用品"></el-radio-button>
            <el-radio-button label="运动户外"></el-radio-button>
            <el-radio-button label="鞋靴箱包"></el-radio-button>
            <el-radio-button label="汽车用品"></el-radio-button>
            <el-radio-button label="手机数码"></el-radio-button>
            <el-radio-button label="其他好货"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="sel">
          <el-select v-model="value" clearable placeholder="请输入店铺类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <hr style="height: 1px; border: none; border-top: 1px dashed #ececec" />
        <div class="table">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="排名" width="100">
            </el-table-column>
            <el-table-column prop="name" label="店铺" width="420">
            </el-table-column>
            <el-table-column prop="province" label="抖音访客量" width="170">
            </el-table-column>
            <el-table-column
              prop="city"
              label="近30天销量"
              width="150"
              style="color: red"
            >
            </el-table-column>
            <el-table-column prop="address" label="推广商品" width="150">
            </el-table-column>
            <el-table-column prop="address1" label="在售博主" width="120">
            </el-table-column>
            <el-table-column prop="address" label="博主粉丝" width="120">
            </el-table-column>
            <el-table-column prop="address" label="视频点赞" width="120">
            </el-table-column>
            <el-table-column prop="address" label="视频评论" width="120">
            </el-table-column>
            <el-table-column prop="address" label="视频分享" width="150">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "1",
      tabPosition: "1",
      value1: "",
      input3: "",
      radio2: "全部",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      tableData: [
        {
          date: "1",
          name: "良品铺子",
          province: "食品零食",
          city: "2867",
          address: "2999",
          address1: "李佳佳",
          zip: 200333,
        },
        {
          date: "2",
          name: "良品铺子",
          province: "食品零食",
          city: "2867",
          address: "643",
          address1: "李佳佳",
          zip: 200333,
        },
        {
          date: "3",
          name: "良品铺子",
          province: "食品零食",
          city: "2867",
          address: "782",
          address1: "李佳佳",
          zip: 200333,
        },
        {
          date: "4",
          name: "良品铺子",
          province: "食品零食",
          city: "2867",
          address: "881",
          address1: "李佳佳",
          zip: 200333,
        },
        {
          date: "5",
          name: "良品铺子",
          province: "食品零食",
          city: "2867",
          address: "3469",
          address1: "李佳佳",
          zip: 200333,
        },
        {
          date: "6",
          name: "良品铺子",
          province: "食品零食",
          city: "2867",
          address: "9621",
          address1: "李佳佳",
          zip: 200333,
        },
        {
          date: "7",
          name: "良品铺子",
          province: "食品零食",
          city: "2867",
          address: "1399",
          address1: "李佳佳",
          zip: 200333,
        },
      ],
      value: "",
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="less" scoped>
  .main :deep(.is-active){
    color: #506eff;
  }
.main :deep(.el-tabs__active-bar)  {
    background-color: #506eff;
  }
.table {
  margin-top: 15px;
}
.data {
  width: 55%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  border-left: 4px solid #506eff;
  .el-radio-group {
    margin-bottom: 0 !important;
  }
}
.search {
  width: 55%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 15px;
  span {
    width: 13%;
    color: #303133;
    font-weight: 700;
    font-size: 14px;
  }
}
.cate {
  width: 55%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background-color: #506eff;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin: 0 12px 6px 0;
    border-radius: 8px;
    padding: 0 6px;
    cursor: pointer;
  }
  span {
    width: 13%;
    color: #303133;
    font-weight: 700;
    font-size: 14px;
  }
  :deep(.el-radio-button--small .el-radio-button__inner) {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin: 0 12px 6px 0;
    border-radius: 8px;
    padding: 0 6px;
    cursor: pointer;
    border: 0;
    font-size: 14px;
  }
  :deep(.el-radio-button--small .el-radio-button__inner):hover {
    background-color: #506eff;
    color: #fff;
  }
}
.cate1 {
  width: 93%;
  display: flex;
  align-items: center;

  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background-color: #506eff;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin: 0 12px 6px 0;
    border-radius: 8px;
    padding: 0 6px;
    cursor: pointer;
  }
  span {
    width: 7%;
    color: #303133;
    font-weight: 700;
    font-size: 14px;
  }
  :deep(.el-radio-button--small .el-radio-button__inner) {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin: 0 12px 6px 0;
    border-radius: 8px;
    padding: 0 6px;
    cursor: pointer;
    border: 0;
    font-size: 14px;
  }
  :deep(.el-radio-button--small .el-radio-button__inner):hover {
    background-color: #506eff;
    color: #fff;
  }
}
.sel {
  width: 39%;
  margin-bottom: 15px;

  :deep(.el-input__inner) {
    width: 400px;
  }
}
.table {
  color: black;
  :deep(.el-table thead) {
    color: black;
  }
}
</style>